<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符（全局选择器），用于页面初始化 */
        *{
            margin: 0;
            padding: 0;
        }

        /* 元素选择器，根据名称选择所有对应元素 */
        p{
            font-size: 50px;
            color: aqua;
        }
        /* 类选择器，根据类名选择元素，相同类获得相同样式 */
        .box{
            height: 100px;
            width: 100px;
            background: crimson;
        }
        .content{
            float: right;
        }
        /* id选择器，选择对应id元素，原则上id具有唯一性 */
        #username{
            font-size: 50px;
            color: aquamarine;
        }
        /* 合并选择器，提取出多个元素的公用属性，减少代码冗杂 */
        .box1,.box2{
            height: 100px;
            width: 100px;
        }
        .box1{
            background: violet;
        }
        .box2{
            background: yellowgreen;
        }

        /* 选择器优先级：行内样式（内联样式）>id选择器>类选择器>元素选择器 */
    </style>
</head>

<body>
    <p>我是p标签</p>
    <span>我是span标签</span>
    <div>
        <p>我是div中的p标签</p>
    </div>

    <div class="box"></div>
    <p class="box"></p>
    <!-- 多个类使用空格隔开都可以生效 -->
    <!-- 可以在js中通过classlist操作具有的类名 -->
    <p class="box content"></p>

    <p id="username">火白一十一</p>

    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>